<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3 进度条</title>
</head>
<style>
  *{
      margin: 0;
      padding: 0;
  }
  .progress-bar{
      margin: 300px auto;
      width: 600px;
      height: 20px;
      background-image: repeating-linear-gradient(45deg,#2ed573 0%,#2ed573 1%,#7bed9f 1%,#7bed9f 2%);
      background-position: -2px 0;
      background-size: 150%;
      animation: slider 5s linear infinite;
  }
  @keyframes slider {
      from{}
      to{
          background-position: -100% 0;
      }
  }
</style>
<body>
<div class="progress-bar"></div>
</body>
</html>